<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../static/webssh_static/css/xterm.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../static/webssh_static/css/fullscreen.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css" />
    <script src="../../static/js/jquery-3.1.1.min.js"></script>
    <script src="../../static/js/bootstrap.min.js"></script>
    <script src="../../static/webssh_static/js/xterm.min.js"></script>
    <script src="../../static/webssh_static/js/fullscreen.min.js"></script>

</head>
<body>
    <div class="bs-docs-example">
            <table class="table">
              <thead>
                <tr>
                  <th>Seri#</th>
                  <th>HostName</th>
                  <th>IpAddress</th>
                  <th>Usage</th>
                  <th>Oprations</th>
                </tr>
              </thead>

              <tbody>
              {% for host in result %}
                <tr>
                  <td>{{ host.id }}</td>
                  <td>{{ host.hostname }}</td>
                  <td>{{ host.ipaddress }}</td>
                  <td>{{ host.appgroup }}</td>
                  <td><button type="button" class="btn btn-default client" id="{{ host.id }}">终端</button></td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>

    <script>
        jQuery(function ($) {
            $(document).on('click', '.client', function (event) {
                console.log('Click terminal button')
                 event.preventDefault();

                        var id_a = $(this).attr('id');

                        $.ajax({
                            headers: {"X-CSRFToken": '{{ csrf_token }}'},
                            url: "/terminal/",
                            type: 'POST',
                            data: {'id': id_a},
                            success: function (ret) {

                                var obj = JSON.parse(ret);
                                var ips = obj.ip;
                                var ports = obj.port;
                                var usernames = obj.username;
                                var passwords = obj.password;
                                {#window.open ('terminal.html', 'target', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')#}
                                 window.open(ret, '_blank').location;
                                {#var obj = JSON.parse(ret);#}
                                {#var ips = '192.168.32.133';#}
                                {#var ports = '22';#}
                                {#var usernames = 'chenann';#}
                                {#var passwords = '1';#}

                                $.ajax({
                                    {#url: "http://{{ Webssh }}:{{ Webssh_port }}/",#}
                                    url: "http://localhost:9000/",
                                    type: 'POST',
                                    data: {hostname: ips, port: ports, username: usernames, password: passwords},
                                    crossDomain: true,
                                    success: callback
                                });

                                    function current_geometry() {
                                        cols = parseInt(window.innerWidth / 10);
                                        rows = parseInt(window.innerHeight / 24);
                                        return [cols, rows];
                                      }



                                function callback(msg) {
                                    console.log(msg);
                                    if (msg.status) {
                                          swal("错误", "登陆" + "[ " + msg.status + " ]" + "遇到错误", "error");
                                          return;
                                    }





                                    var    url = "ws://localhost:9000/" + 'ws?id=' + msg.id,
                                        socket = new WebSocket(url),
                                        terminal = document.getElementById('#terminal'),
                                        geometry = current_geometry();
                                        term = new Terminal({cursorBlink: true,  cols: geometry[0], rows: geometry[1]});

                                    console.log(url);
                                    term.on('data', function (data) {
                                        console.log(data);
                                        socket.send(data);
                                    });

                                    socket.onopen = function (e) {
                                        $('.container1').hide();
                                        term.open(terminal, true);
                                        term.toggleFullscreen(true);
                                    };

                                    socket.onmessage = function (msg) {
                                        console.log(msg);
                                        term.write(msg.data);
                                    };

                                    socket.onerror = function (e) {
                                        console.log(e);
                                    };

                                    socket.onclose = function (e) {
                                        console.log(e);
                                        term.destroy();
                                        $('.container1').show();
                                        // status.text(e.reason);
                                    };
                                }


                                                $(window).resize(function(){
                        if (typeof term != "undefined") {
                           geometry = current_geometry();
                           term.geometry = geometry;
                           term.resize(geometry[0], geometry[1]);
                         }
                       });

                            }
                        });
            })

        })
    </script>
    <div id="terminal"></div>
</body>
</html>